<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Mapbox GL Inspect</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.css' rel='stylesheet' />
    <script src='/dist/mapbox-gl-inspect.js'></script>
    <link href='/dist/mapbox-gl-inspect.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<div id='map'></div>
<script>
var map = new mapboxgl.Map({
    container: 'map',
    style: {
      "version": 8,
      "center": [
        8.54806714892635,
        47.37180823552663
      ],
      "zoom": 12.241790506353492,
      "bearing": 0,
      "pitch": 0,
      "sources": {
        "naturalearth-airports": {
          "type": "geojson",
          "data": "https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson"
        }
      },
      "layers": [
        {
          "id": "airports",
          "type": "circle",
          "source": "naturalearth-airports",
          "source-layer": ""
        }
      ]
    },
    center: [-74.50, 40],
    zoom: 3,
    hash: true
});
map.addControl(new mapboxgl.NavigationControl());
map.addControl(new MapboxInspect());

</script>

</body>
</html>
